<template>
  <div class="recent-visited">
    <div class="section-header">
      <h2 class="section-title">{{ title }}</h2>
      <div class="header-actions">
        <div v-if="showEditButton" class="edit-button" @click="isEditing = !isEditing">
          <i class="fas" :class="isEditing ? 'fa-check' : 'fa-edit'"></i>
        </div>
        <div v-if="isEditing" class="clear-button" @click="clearRecent">
          <i class="fas fa-trash-alt"></i>
        </div>
      </div>
    </div>
    
    <div v-if="recentItems.length === 0" class="empty-recent">
      <i class="fas fa-history empty-icon"></i>
      <div class="empty-text">暂无访问记录</div>
    </div>
    
    <div v-else class="recent-grid">
      <div 
        v-for="(item, index) in displayItems" 
        :key="index"
        class="recent-item"
        :class="{ 'editing': isEditing }"
        @click="!isEditing ? navigateTo(item.path) : removeItem(index)"
      >
        <div class="item-icon" :style="{ backgroundColor: item.color || '#1890ff' }">
          <i :class="item.icon || 'fas fa-file'"></i>
          <div v-if="isEditing" class="delete-overlay">
            <i class="fas fa-times"></i>
          </div>
        </div>
        <div class="item-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import storage from '@/utils/storage'

export default {
  name: 'RecentVisited',
  props: {
    title: {
      type: String,
      default: '最近访问'
    },
    limit: {
      type: Number,
      default: 8
    },
    showEditButton: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      recentItems: [],
      isEditing: false
    }
  },
  computed: {
    displayItems() {
      return this.recentItems.slice(0, this.limit)
    }
  },
  created() {
    this.loadRecentItems()
  },
  methods: {
    loadRecentItems() {
      try {
        const savedItems = storage.getItem('recentVisits', [])
        this.recentItems = savedItems
      } catch (error) {
        console.error('加载最近访问失败:', error)
        this.recentItems = []
      }
    },
    
    navigateTo(path) {
      this.$router.push(path)
    },
    
    removeItem(index) {
      // 移除指定项
      this.recentItems.splice(index, 1)
      
      // 保存更新后的列表
      this.saveRecentItems()
      
      // 通知父组件更新
      this.$emit('update-items')
    },
    
    clearRecent() {
      // 清空列表
      this.recentItems = []
      
      // 保存更新
      this.saveRecentItems()
      
      // 退出编辑模式
      this.isEditing = false
      
      // 通知父组件更新
      this.$emit('update-items')
    },
    
    saveRecentItems() {
      storage.setItem('recentVisits', this.recentItems)
    }
  }
}
</script>

<style scoped>
.recent-visited {
  margin: 0 16px 16px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.edit-button, .clear-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  margin-left: 8px;
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.recent-item:active {
  transform: scale(0.95);
}

.recent-item.editing {
  position: relative;
}

.item-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: white;
}

.delete-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(245, 34, 45, 0.8);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  width: 100%;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-recent {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-icon {
  font-size: 32px;
  color: #ccc;
  margin-bottom: 8px;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

@media (max-width: 768px) {
  .recent-visited {
    margin: 0 12px 16px;
  }
}
</style> 